<template>
  <div class="largeGrainedAssets">
    <topBar :title="title"></topBar>
    <div class="center">
      <div class="left">
        <div>
          <div class="square"></div>
          <div class="html">环比增长大颗粒资产TOP10</div>
        </div>
        <el-table
          border
          style="width: 100%"
          :header-cell-style="{ background: '#0070C0', color: '#ffffff' }"
          :data="upData"
        >
          <el-table-column align="center" label="环比增长大颗粒资产TOP10">
            <el-table-column
              align="center"
              label="号码"
              prop="accsNbr"
            ></el-table-column>
            <el-table-column
              align="center"
              label="产品"
              prop="prdName"
            ></el-table-column>
            <el-table-column
              width="180px"
              align="center"
              label="客户"
              prop="custName"
            ></el-table-column>
            <el-table-column
              align="center"
              label="归属"
              prop="areaName"
            ></el-table-column>
            <el-table-column
              align="center"
              label="环比增长（万元）"
              prop="indexValue"
            ></el-table-column>
          </el-table-column>
        </el-table>
      </div>
      <div class="right">
        <div>
          <div class="square"></div>
          <div class="html">环比降收大颗粒资产TOP10</div>
        </div>
        <el-table
          border
          style="width: 100%"
          :header-cell-style="{ background: '#0070C0', color: '#ffffff' }"
          :data="downData"
        >
          <el-table-column align="center" label="环比降收大颗粒资产TOP10">
            <el-table-column
              align="center"
              label="号码"
              prop="accsNbr"
            ></el-table-column>
            <el-table-column
              align="center"
              label="产品"
              prop="prdName"
            ></el-table-column>
            <el-table-column
              width="180px"
              align="center"
              label="客户"
              prop="custName"
            ></el-table-column>
            <el-table-column
              align="center"
              label="归属"
              prop="areaName"
            ></el-table-column>
            <el-table-column
              align="center"
              label="环比下降（万元）"
              prop="indexValue"
            ></el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import topBar from "./topBar";
import { assettop } from "@/api/codeIncome/analysis";
export default {
  name: "largeGrainedAssets",
  components: {
    topBar,
  },
  data() {
    return {
      title: "码号收入 – 10月环比9月TOP增长、降收大颗粒资产",
      upData: [],
      downData: [],
    };
  },
  props: {
        searchData: {
        type: Object,
        default: {},
        },
    },
    watch: {
        searchData: {
        handler(newName) {
            this.getUpData();
            this.getDownData();
        },
        deep: true,
        },
    },
  created() {},
  mounted() {
    this.getUpData();
    this.getDownData();
  },
  methods: {
    getUpData() {
      assettop({
        sign: "UP",
        acctMonth: this.searchData.acctMonth,
        areaId: this.searchData.areaId,
      }).then((res) => {
        if (res.code == 200) {
          this.title = res.data.characterList[0].text;
          this.upData = res.data.dataList[0].data;
        }
      });
    },
    getDownData() {
      assettop({
        sign: "DOWN",
        acctMonth: this.searchData.acctMonth,
        areaId: this.searchData.areaId,
      }).then((res) => {
        if (res.code == 200) {
          this.downData = res.data.dataList[0].data;
        }
      });
    },
  },
};
</script>

<style scoped>
.largeGrainedAssets {
  box-sizing: border-box;
  padding: 20px;
  box-shadow: 0px 0px 10px 1px rgb(0 0 0 / 15%);
}
</style>

<style lang="scss" scoped>
.largeGrainedAssets {
  margin-top: 20px;
}
.center {
  box-sizing: border-box;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  .left,
  .right {
    width: 49%;
    > div {
      width: 100%;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }
    .square {
      margin-top: 15px;
      margin-right: 10px;
      width: 10px;
      height: 10px;
      background: #c00000;
      transform: rotate(45deg);
    }
    .html {
      font-size: 20px;
      color: black;
      letter-spacing: 1px;
      line-height: 40px;
      font-weight: bold;
      color: #c00000;
    }
  }
}
</style>
